<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.keyword" placeholder="关键字"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="getTypes">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--highlight-current-row v-loading  忙加载属性-->
        <!--列表-->
        <el-table :data="types" highlight-current-row v-loading="listLoading"  @row-dblclick="show"@selection-change="selsChange" style="width: 100%;">
            <!--多选框    （@selection-change= 事件），会将选中行对象自动获取传递-->
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" width="60">
            </el-table-column>
            <el-table-column prop="sn" label="类型编码" width=auto sortable>
            </el-table-column>
            <el-table-column prop="name" label="类型" width=auto>
            </el-table-column>
            <el-table-column label="操作" width=auto>
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDelType(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--批量删除工具条-->
        <el-col :span="24" class="toolbar">
            <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
            <el-pagination layout="prev, pager, next"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-size="pageSize"
                           :total="total" style="float:right;">
            </el-pagination>
        </el-col>


        <!--新增界面
            :visible.sync= 控制模态框是否显示 为true就显示
            :rules  绑定模型层的属性校验规则
            prop= 用来申明校验规则的属性名
            ref= 给当前表单取一个别名 方便后面表单提交的时候，做整体校验
        -->

        <!--类型新增界面-->
        <el-dialog :title="title" :visible.sync="typeFormVisible" :close-on-click-modal="false">
            <el-form :model="typeForm" label-width="80px" :rules="typeFormRules" ref="typeForm">
                <el-form-item label="部门编码" prop="sn">
                    <el-input v-model="typeForm.sn" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="部门" prop="name">
                    <el-input v-model="typeForm.name" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="typeFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="typeSubmit" :loading="typeLoading">提交</el-button>
            </div>
        </el-dialog>


        <!--明细新增界面-->
        <el-dialog :title="title" :visible.sync="detailFormVisible" :close-on-click-modal="false">
            <el-form :model="detailForm" label-width="80px" :rules="typeFormRules" ref="typeForm">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="detailForm.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="类型" prop="type">
                    <el-select v-model="detailForm.type"  value-key="id" placeholder="请选择类型">
                        <el-option
                                v-for="item in type"
                                :key="item.id"
                                :label="item.name"
                                :value="item">
                            <span style="float: left">{{ item.name }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
                        </el-option>
                    </el-select>

                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="detailFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="detailSubmit" :loading="typeLoading">提交</el-button>
            </div>
        </el-dialog>

        <el-drawer
                title="明细表"
                :visible.sync="drawer"
                :with-header="false">
            <span>
                <!--工具条-->
                <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                    <el-form :inline="true" :model="filtersDetail">
                        <el-form-item>
                            <el-input v-model="filters.keywordDetail" placeholder="关键字"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="getDetail">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="handleAddDetail">新增</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>


                <el-table :data="detail" highlight-current-row v-loading="listLoading"  @row-dblclick="show"@selection-change="selsChange2" style="width: 100%;">
                    <!--多选框    （@selection-change= 事件），会将选中行对象自动获取传递-->
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column type="index" width="60">
                    </el-table-column>
                    <el-table-column prop="type.name" label="类型" width="120" sortable>
                    </el-table-column>
                    <el-table-column prop="name" label="名称" width="100">
                    </el-table-column>
                    <el-table-column label="操作" width="150">
                        <template scope="scope">
                            <el-button size="small" @click="handleEditdetail(scope.$index, scope.row)">编辑</el-button>
                            <el-button type="danger" size="small" @click="handleDelDetail(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>


                <!--批量删除工具条-->
                <el-col :span="24" class="toolbar">
                    <el-button type="danger" @click="batchRemoveDetail" :disabled="this.sels2.length===0">批量删除</el-button>
                    <el-pagination layout="prev, pager, next"
                                   @current-change="handleCurrentChangeDetail"
                                   :current-page="currentPage"
                                   :page-size="pageSize"
                                   :total="total" style="float:right;">
                    </el-pagination>
                </el-col>
            </span>
        </el-drawer>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                title:'',
                filters: {
                    keyword: '',
                    keywordDetail: '',
                },
                types: [],
                type: [],
                types_id: [],
                detail:[],
                total: 0,
                drawer: false,
                currentPage: 1,
                listLoading: false,
                pageSize:5,
                sels: [],//列表选中列
                sels2: [],//列表选中列

                typeFormVisible: false,//新增界面是否显示
                detailFormVisible: false,//新增界面是否显示
                typeLoading: false,
                typeFormRules: {
                    name: [
                        { required: true, message: '请输入类型', trigger: 'blur' }
                    ],
                    sn: [
                        { required: true, message: '请输入编码', trigger: 'blur' }
                    ]

                },


                //新增/修改类型界面数据
                typeForm: {
                    name: '',
                    sn: '',
                    id:null,

                },
                //新增/修改明细界面数据
                detailForm: {
                    name: '',
                    type: null,
                    id:null,

                }

            }
        },
        methods: {


            show(row){
                this.types_id=row.id;
                //弹出抽屉
                this.drawer=true;
                this.getDetail();
                this.getType();

            },

            handleCurrentChange(val) {
                this.currentPage = val;
                this.getTypes();
            },
            handleCurrentChangeDetail(val) {
                this.currentPage = val;
                this.getDetail();
            },

            //获取类型列表
            getTypes() {
                let para = {
                    // 当前页
                    currentPage: this.currentPage,
                    //高级查询
                    keyword: this.filters.keyword,
                    //每页显示条数
                    pageSize:this.pageSize
                };
                //忙加载
                this.listLoading = true;
                //NProgress.start();

                this.$http.post("/type",para).then(result=>{
                    //关闭忙加载
                    this.listLoading = false;
                    this.types=result.data.rows;
                    this.total=result.data.total;
                }).catch(result=>{
                    this.$message({
                        message:'出错了，连接不到业务代码',
                        type:error
                    })
                })

            },
            //获取明细列表
            getDetail() {
                let para = {
                    // 当前页
                    currentPage: this.currentPage,
                    //高级查询
                    keyword: this.filters.keywordDetail,
                    //每页显示条数
                    pageSize:this.pageSize,
                    types_id:this.types_id
                };
                //忙加载
                this.listLoading = true;
                //NProgress.start();

                this.$http.post("/detail",para).then(result=>{
                    //关闭忙加载
                    this.listLoading = false;
                    this.detail=result.data.rows;
                    this.total=result.data.total;
                }).catch(result=>{
                    this.$message({
                        message:'出错了，连接不到业务代码',
                        type:error
                    })
                })

            },






            //删除类型
            handleDelType: function (index, row) {
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    this.$http.delete("/type/"+row.id ).then(result=>{
                        // 关闭忙加载
                        this.listLoading=false;

                        result=result.data
                        if (result.success){
                            // 提示删除成功
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                        }else {
                            this.$message({
                                message:'删除失败',
                                type:'error'
                            })
                        }
                        //删除成功回到第一页
                        this.currentPage=1;
                        this.getTypes();
                    }).catch(result=>{

                    })

                }).catch(() => {

                });
            },


            //删除明细
            handleDelDetail: function (index, row) {
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    this.$http.delete("/detail/"+row.id ).then(result=>{
                        // 关闭忙加载
                        this.listLoading=false;

                        result=result.data
                        if (result.success){
                            // 提示删除成功
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                        }else {
                            this.$message({
                                message:'删除失败',
                                type:'error'
                            })
                        }
                        //删除成功回到第一页
                        this.currentPage=1;
                        this.getDetail();

                    }).catch(result=>{

                    })

                }).catch(() => {

                });
            },




            //显示类型编辑界面
            handleEdit: function (index, row) {
                this.title="类型编辑";
                this.typeFormVisible = true;
                //复制数据做回显
                this.typeForm = Object.assign({}, row);

            },
            //显示明细编辑界面
            handleEditdetail: function (index, row) {
                this.title="明细编辑";
                this.detailFormVisible = true;
                //复制数据做回显
                this.detailForm = Object.assign({}, row);

            },
            //显示类型新增界面
            handleAdd: function () {
                this.title="类型新增";
                this.typeFormVisible = true;
                this.typeForm = {
                    name: '',
                    type: null,
                    id:null,
                };
            },
            //显示明细新增界面
            handleAddDetail: function () {
                this.title="明细新增";
                this.detailFormVisible = true;
                this.detailForm = {
                    name: '',
                    type: null,
                    id:null,
                };
            },
            //新增类型
            typeSubmit: function () {
                // 表单验证
                this.$refs.typeForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            // 开启列表忙等框
                            this.typeLoading = true;
                            //复制表单数据，更改不会进行双向绑定，不然修改了没有提交前端也会改变数据
                            let para = Object.assign({}, this.typeForm);
                            this.$http.put("/type",para).then(result=>{
                                // 关闭列表忙等框
                                this.typeLoading = false;
                                if (result.data.success){
                                    this.$message({
                                        message:"添加成功",
                                        type:'success'
                                    })
                                }else {
                                    this.$message({
                                        message:"添加失败",
                                        type:'error'
                                    })
                                }
                                //关闭模态框
                                this.typeFormVisible = false;
                                // 刷新页面
                                this.getTypes();
                            }).catch(result=>{
                                this.$message({
                                    message:"系统繁忙",
                                    type:'error'
                                })
                            })
                        });
                    }
                });
            },

            //新增明细
            detailSubmit: function () {
                // 表单验证
                this.$refs.typeForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            // 开启列表忙等框
                            this.typeLoading = true;
                            //复制表单数据，更改不会进行双向绑定，不然修改了没有提交前端也会改变数据
                            let para = Object.assign({}, this.detailForm);
                            this.$http.put("/detail",para).then(result=>{
                                // 关闭列表忙等框
                                this.typeLoading = false;
                                if (result.data.success){
                                    this.$message({
                                        message:"添加成功",
                                        type:'success'
                                    })
                                }else {
                                    this.$message({
                                        message:"添加失败",
                                        type:'error'
                                    })
                                }
                                //关闭模态框
                                this.detailFormVisible = false;
                                // 刷新页面
                                this.getDetail();
                            }).catch(result=>{
                                this.$message({
                                    message:"系统繁忙",
                                    type:'error'
                                })
                            })
                        });
                    }
                });
            },


            selsChange: function (sels) {
                this.sels = sels;
            },
            selsChange2: function (sels) {
                this.sels2 = sels;
            },



            //类型批量删除
            batchRemove: function () {
                var ids = this.sels.map(item => item.id);
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    //开启列表忙加载
                    this.listLoading = true;
                    this.$http.patch("/type",ids).then(Result=>{
                        //关闭列表忙加载
                        this.listLoading = false;
                        if (Result.data.success){
                            this.$message({
                                message:"删除成功",
                                type:"success"
                            })
                            // 删除成功回到第一页
                            this.currentPage=1;
                            this.getTypes();
                        }else {
                            this.$message({
                                message:"删除失败",
                                type:'error'
                            })
                        }
                    }).catch(result=>{
                        this.$message({
                            message:"连接不到业务代码",
                            type:'error'
                        })
                    })

                });
            },
            //明细批量删除
            batchRemoveDetail: function () {
                var ids = this.sels2.map(item => item.id);
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    //开启列表忙加载
                    this.listLoading = true;
                    this.$http.patch("/detail",ids).then(Result=>{
                        //关闭列表忙加载
                        this.listLoading = false;
                        if (Result.data.success){
                            this.$message({
                                message:"删除成功",
                                type:"success"
                            })
                            // 删除成功回到第一页
                            this.currentPage=1;
                            this.getDetail();
                        }else {
                            this.$message({
                                message:"删除失败",
                                type:'error'
                            })
                        }
                    }).catch(result=>{
                        this.$message({
                            message:"连接不到业务代码",
                            type:'error'
                        })
                    })

                });
            },

            //获取员工
            getType(){
                this.$http.get("/type").then(result=>{
                    this.type=result.data
                }).catch(result=>{
                    this.$message({
                        message:"系统繁忙",
                        type:'error'
                    })
                })
            }
        },
        mounted() {
            this.getTypes();
        }
    }

</script>

<style scoped>

</style>